<!--
 * @Date: 2022-11-12 17:40:18
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-11-29 14:11:15
 * @FilePath: \vue-admin-ts\src\views\main\product\goods\goods.vue
 * @Description: goods
-->
<template>
  <div>
    <page-search
      :searchFormOpt="searchConfig.searchFormOpt"
      @search="searchHandle"
      @reset="reset"
    ></page-search>
    <page-content
      :contentConfig="contentConfig"
      pageName="goods"
      title="商品列表"
      ref="pageContentRef"
    >
      <template #image="{ row }">
        <div class="demo-image__preview">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.imgUrl"
            :preview-src-list="[row.imgUrl]"
            :preview-teleported="true"
            lazy
          />
        </div>
      </template>
    </page-content>
  </div>
</template>
<script lang="ts" setup>
import { usePageSearch } from "@/hooks/usePageSearch";
import pageContent from "@/views/main/components/pageContent/index.vue";
import pageSearch from "@/views/main/components/pageSearch/index.vue";
import { reactive } from "vue";
import { IPageSearchProps } from "../../components/pageSearch/type";
import { goodsTableOptions, goodsFormItems } from "./options";
const [pageContentRef, searchHandle, reset] = usePageSearch();
const searchConfig = reactive<IPageSearchProps>({
  searchFormOpt: {
    formItems: goodsFormItems,
    colLayout: {
      span: 8,
    },
    attrs: {
      labelWidth: "100px",
    },
  },
});
const contentConfig = reactive({
  tableOptions: goodsTableOptions,
  pageConfig: {
    pageInfo: {
      currentPage: 1,
      pageSizes: 10,
    },
    paginationAlign: "right",
  },
  attrs: {
    border: true,
    showIndex: true,
    pagination: true,
    pageSizes: [10, 20, 30],
  },
});
</script>
<style lang="less" scoped>
.demo-image__error {
  .image-slot {
    font-size: 30px;
  }
  .image-slot {
    .el-icon {
      font-size: 30px;
    }
  }
  .el-image {
    width: 100%;
    height: 200px;
  }
}
</style>
